<template>
  <div class="app-container">
    <div class="zd3">
      <div class="top">
        <div :class="show === 0 ? 'select':'' " @click="lingyong">领用</div>
        <div :class="show === 1 ? 'select':'' " @click="tuiku">退库</div>
      </div>

      <div class="zd3-btm" v-if="show == 0">
        <haocailing></haocailing>
      </div>

      <!--退库页面-->
      <div class="zd3-btm" v-if="show == 1">
        <haocaitui></haocaitui>
      </div>
    </div>
  </div>
</template>

<script>
// import { regionData } from 'element-china-area-data'
import { addLingTUi,updateLingTUi,selectLingTUi,deleteLingTUi,updateStatusLingTui } from "@/api/caigou";
import { mapGetters } from "vuex";
import haocailing from './haocailing'
import haocaitui from './haocaitui'
export default {
  name:'Lingyongtuiku',
  components:{
    haocailing,
    haocaitui
  },
  data() {
    return {
      isShow: true,
      show: 0,
      search1: {
        currentPage: 1,
      },
      search2: {
        currentPage: 1,
      },
      total: 1,
      showHeader: false,
      loading1: true,
      loading2: true,
      selectedOptions: [],
      tableData: [], //进货单
      dialogVisible: false,
      tempData: "",
      tempIndex: -1,
      options: [
        {
          label: "不限",
          value: "0",
        },
        {
          label: "供应商",
          value: "1",
        },
        {
          label: "客户",
          value: "2",
        },
      ],
      value: "",
      djtime: "",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 跳转资产详情
     */
    goDetail(data){
      console.log(data)
      this.$router.push({
        name: 'Zichanmingxi',
        params: {
          options: JSON.stringify(data)
        }
      })
    },
    // 获取进货单
    getList() {
      this.search1.status = '领用'
      this.loading1 = true
      this.loading2 = true
      selectLingTUi(this.search1).then((res) => {
        console.log(res)
        this.tableData1 = res.data.list
        this.total1 = res.data.total;
        this.$forceUpdate()
        this.loading1 = false;
      });
      this.search2.status = '退库'
      selectLingTUi(this.search2).then((res) => {
        console.log(res)
        this.tableData2 = res.data.list
        this.$forceUpdate()
        this.total2 = res.data.total;
        this.loading2 = false;
      });
    },
    /**
     * 确认领用
     */
    sureLing(item){
      console.log('领用信息',item)
      item.ptype = '已确认'
      item.putList.map(item => {
        delete item.propertyType
        item.ptypes = '已确认'
        return item
      })
      updateStatusLingTui(item).then(res => {
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getList()
      })
    },
    /**
     * 确认退库
     */
    sureTui(item){
      console.log(item)
      updateStatusLingTui(obj).then(res => {
        console.log(res)
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.getList()
      })
    },
    // 查看详情
    lookling(item, index) {
      console.log(item, index);
      this.$router.push({
        name: "Addlingyong",
        params: {
          options: JSON.stringify(item),
          look: true
        },
      });
    },
    looktui(item, index) {
      console.log(item, index);
      this.$router.push({
        name: "Addtuiku",
        params: {
          options: JSON.stringify(item),
          look: true
        },
      });
    },
    // 确认入库操作
    sureIn(item) {
      console.log(item);
      this.$router.push({
        name: "InboundorderWrite",
        params: {
          options: JSON.stringify(item),
        },
      });
    },
    bindShow() {
      this.isShow = !this.isShow;
    },
    lingyong() {
      this.show = 0;
      this.$forceUpdate()
    },
    tuiku() {
      this.show = 1;
      this.$forceUpdate()
    },
    // 编辑操作
    write(item, index) {
      console.log(item);
      this.$router.push({
        name: "InboundorderWrite",
        params: {
          options: JSON.stringify(item),
        },
      });
    },
    save(item) {},
    // 删除操作
    deleteRow(item) {
      console.log(item);
      console.log("删除");
      deleteLingTUi(item.lid).then((res) => {
        console.log(res);
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getList();
      });
    },
    goPage(page) {
      this.search.currentPage = page;
      this.getList();
    },
    goPrev(page) {
      console.log(page);
      this.search.currentPage--;
      this.getList();
    },
    goNext(page) {
      this.search.currentPage++;
      this.getList();
      console.log(page);
    },
    resetList() {
      this.search = {
        currentPage: 1,
      };
    },
    // 新增入库单
    addlingyong(item) {
      this.$router.push({ name: "Addlingyong" });
    },
    addtuiku(item) {
      this.$router.push({ name: "Addtuiku" });
    },
  },
};
</script>

<style lang="scss" scoped>
.godetail{
  font-size: 14px;
  color: #18A05E;
  cursor: pointer;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.app-container {
  padding: 10px;
}
.top {
  display: flex;
  background-color: #fff;
  padding: 10px 10px 0 10px;
  border-radius: 5px;
  margin: 0;
  > div {
    padding-top: 5px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 10px;
    text-align: center;
  }
}
.top div:hover {
  cursor: pointer;
}
.select {
  color: #34bfa3;
  border-bottom: 2px solid #34bfa3;
}

.status {
  border-radius: 3px;
  font-size: 12px;
  width: 45px;
  text-align: center;
  color: #fff;
  background: #777777;
  margin: 0 auto;
}
.status-active {
  background: #18a05e;
}
.red {
  background: #ff0000;
}
.green {
  background: #18a05e;
}
.yellow {
  background: #f8c419;
}
.blue {
  background: #078fff;
}
.orderStatus {
  display: flex;
  justify-content: center;
  > p {
    padding: 0px 5px;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    margin: 0 0px 0 0;
  }
  .blue {
    background: #3a87ad;
  }
  .green {
    background: #18a05e;
  }
  .yellow {
    background: #ff7a0e;
  }
  .red {
    background: #c60000;
  }
}

.status {
  border-radius: 3px;
  font-size: 14px;
  width: 50px;
  color: #fff;
  background: #777777;
  margin: 0 auto;
}
.status-active {
  background: #18a05e;
}
.inps {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: #333;
}
.inps-active {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  // background:#ccc;
  border: none;
  color: #333;
}

.wh5-title {
  transition: all 0.5s;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  padding: 3px 20px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.wh5-title div {
  margin-right: 5px;
  color: slategray;
}
.btns {
  display: flex;
  align-items: center;
  margin-left: 10px;
  /*position: absolute;
	right: 20px;
	bottom: 5px;*/
  > h3 {
    width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    margin-left: 20px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    width: 64px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    // color: #fff;
    margin: 0 30px 0 30px;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h5 {
    color: #18a05e;
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    margin: 0 20px;
    > i {
      right: 0px;
      margin-top: -5px;
    }
  }
}
.zd3-title {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  background: #ffffff;
  // border-radius: 8px;
  // border: 1px solid rgba(0, 0, 0, 0.1);

  > p {
    font-size: 14px;
    color: #333;
    margin-right: 30px;

    > span {
      padding-right: 20px;
    }

    > input {
      width: 160px;
      height: 32px;
      // background: #ccc;
      border-radius: 3px;
      border: 1px solid #ccc;
      padding-left: 10px;
      color: #333;
    }
  }

  > h3 {
    width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    margin: 0 30px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    width: 64px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    margin-right: 30px;
  }
}
.zd3-btm .btn-prev:after {
  content: "上一页";
}
.zd3-btm .btn-next:before {
  content: "下一页";
}
.zd3-btm .btn-prev,
.zd3-btm .btn-next {
  width: 65px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  /deep/.el-button--text[data-v-318d347c] {
    margin: 0 10px;
  }
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
    white-space: nowrap;
    padding: 15px 5px;
    color: #303133;
    font-weight: bold;
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }
  .el-button--text {
    margin: 0 5px;
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.top-btn {
  display: flex;
  margin-left: 20px;
  > p {
    margin-right: 10px;
  }
}
</style>
